import React, { Component } from 'react';
import { Image, StyleSheet, Text, View } from 'react-native';
import { adapt } from '~/utils/ScreenAdapter';
import Swiper from 'react-native-swiper';
import { DefaultStyles } from '~/styles/GlobalStyles';

export default class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      showsPagination: true,
    };
  }
  goLogin = () => {
    // console.log(this.props)
    const { replace } = this.props.navigation;
    replace('Login');
  };
  render() {
    return (
      <Swiper
        style={styles.container}
        showsPagination={this.state.showsPagination}
        showsButtons={false}
        loop={false}
        paginationStyle={{ bottom: adapt(60) }}
        onIndexChanged={(index) => {
          console.log(index);
          this.setState({
            showsPagination: !(index === 2),
          });
        }}
      >
        <View style={styles.slide}>
          <Image
            style={styles.bg}
            resizeMode={'contain'}
            source={require('../../assets/images/bg-wel-1.png')}
          />
        </View>
        <View style={styles.slide}>
          <Image
            style={styles.bg}
            resizeMode={'contain'}
            source={require('../../assets/images/bg-wel-2.png')}
          />
        </View>
        <View style={styles.slide}>
          <Image
            style={styles.bg}
            resizeMode={'contain'}
            source={require('../../assets/images/bg-wel-3.png')}
          />
          <View style={styles.btnWrap}>
            <Text style={styles.btn} onPress={this.goLogin}>
              立即体验
            </Text>
          </View>
        </View>
      </Swiper>
    );
  }
}

const styles = StyleSheet.create({
  container: {},
  bg: {
    width: '100%',
    height: '100%',
  },
  slide: {
    position: 'relative',
    width: '100%',
    height: '100%',
    flex: 1,
  },
  text: {
    color: '#fff',
    fontSize: 30,
    fontWeight: 'bold',
  },
  btnWrap: {
    position: 'absolute',
    width: '100%',
    bottom: adapt(40),
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'center',
  },
  btn: {
    ...DefaultStyles.Medium,
    width: adapt(252),
    color: 'rgba(55, 118, 246, 1)',
    fontSize: 16,
    paddingVertical: adapt(15),
    textAlign: 'center',
    borderWidth: 1,
    borderColor: 'rgba(55, 118, 246, 1)',
    borderRadius: adapt(24),
  },
});
